
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { FileText, Download, Eye, Star } from "lucide-react";

const studyTools = [
  {
    id: "1",
    title: "Essay Writing Template",
    description: "Step-by-step guide for crafting compelling academic essays",
    category: "Writing",
    downloads: 1240,
    rating: 4.7,
    type: "Template"
  },
  {
    id: "2",
    title: "Research Paper Checklist",
    description: "Comprehensive checklist to ensure your research meets academic standards",
    category: "Research",
    downloads: 890,
    rating: 4.8,
    type: "Checklist"
  },
  {
    id: "3",
    title: "Creative Thinking Worksheet",
    description: "Structured prompts to enhance creative problem-solving skills",
    category: "Creativity",
    downloads: 650,
    rating: 4.6,
    type: "Worksheet"
  },
  {
    id: "4",
    title: "Video Analysis Guide",
    description: "Framework for analyzing educational videos and documentaries",
    category: "Analysis",
    downloads: 420,
    rating: 4.9,
    type: "Guide"
  },
  {
    id: "5",
    title: "Reflection Journal Template",
    description: "Daily reflection prompts to track your learning progress",
    category: "Reflection",
    downloads: 980,
    rating: 4.5,
    type: "Template"
  },
  {
    id: "6",
    title: "Study Group Organizer",
    description: "Tools to organize and maximize your study group sessions",
    category: "Collaboration",
    downloads: 350,
    rating: 4.7,
    type: "Organizer"
  }
];

export function StudentStudyToolkit() {
  return (
    <div className="space-y-6">
      <div className="text-center mb-8">
        <h3 className="text-xl font-semibold mb-2">Study Toolkit Library</h3>
        <p className="text-gray-600">Templates for writing, research, and creative thinking</p>
      </div>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {studyTools.map((tool) => (
          <Card key={tool.id} className="hover:shadow-lg transition-shadow">
            <CardHeader>
              <div className="flex items-start justify-between mb-2">
                <Badge variant="outline" className="text-xs">
                  {tool.category}
                </Badge>
                <div className="flex items-center gap-1">
                  <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                  <span className="text-sm text-gray-600">{tool.rating}</span>
                </div>
              </div>
              <CardTitle className="text-lg">{tool.title}</CardTitle>
              <CardDescription>{tool.description}</CardDescription>
            </CardHeader>
            
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between text-sm text-gray-600">
                <div className="flex items-center gap-1">
                  <FileText className="w-4 h-4" />
                  <span>{tool.type}</span>
                </div>
                <div className="flex items-center gap-1">
                  <Download className="w-4 h-4" />
                  <span>{tool.downloads}</span>
                </div>
              </div>
              
              <div className="flex gap-2">
                <Button variant="outline" size="sm" className="flex-1">
                  <Eye className="w-4 h-4 mr-1" />
                  Preview
                </Button>
                <Button size="sm" className="flex-1">
                  <Download className="w-4 h-4 mr-1" />
                  Download
                </Button>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}
